<template>
  <section class="my-resume">
    <div class="bg"></div>
    <div class="top- flex flex-between flex-middle">
      <div class="left">简历完整度{{resumeCompleteness}}%</div>
      <div class="right" @click="routerTo('/pages/my/resumepreview/main')">预览</div>
    </div>
    <div class="userinfo">
      <van-row v-if="info.memberMap">
        <van-col span="6">
          <img class="avatar" :src="info.memberMap.headImgUrl" alt />
        </van-col>
        <van-col span="16">
          <div class="name">{{info.memberMap.nickName}}</div>
          <div class="flex mt10">
            <div class="tag-year" v-if="info.memberMap.age">{{info.memberMap.age}}岁</div>
            <div class="tag-edu" v-if="info.memberMap.educationStatus">{{info.memberMap.educationStatus == 1?'在读':'毕业'}}</div>
            <div class="tag-city" v-if="info.memberMap.areaName">{{info.memberMap.areaName}}</div>
          </div>
          <div class="text3 mt10" v-if="info.memberMap.phone">电话：{{info.memberMap.phone}}</div>
        </van-col>
        <van-col span="2">
          <div @click.stop="routerTo('/pages/my/data/main')">
          <van-icon name="edit" color="#3BB8FD" size="15px" />
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 教育经历 -->
    <div class="item">
      <div class="top flex flex-between flex-middle">
        <div class="text1">教育经历</div>
        <div @click="routerTo('../eduExp/main')">
          <van-icon name="plus" color="#3BB8FD" />
          <span class="text1">添加</span>
        </div>
      </div>
      <div @click="routerTo('../eduExp/main',item)" class="bottom" v-for="(item,index1) in info.memberEducationList" :key="index1">
          <p class="text2">{{item.startedSchoolTime + '——' + item.graduationTime}}</p>
          <p class="text2 mt15">{{item.schoolName}} | {{item.educationText}}</p>
          <p class="text3 mt15">主修专业：{{item.specialities}}</p>
          <p class="text3 mt15">{{item.schoolExperience}}</p>
      </div>
    </div>
    <!-- 工作经历 -->
    <div class="item">
      <div class="top flex flex-between flex-middle">
        <div class="text1">工作经历</div>
        <div @click="routerTo('../workExp/main')">
          <van-icon name="plus" color="#3BB8FD" />
          <span class="text1">添加</span>
        </div>
      </div>
      <div @click="routerTo('../workExp/main',item)" class="bottom" v-for="(item,index2) in info.workExperienceList" :key="index2">
          <p class="text2">{{item.beginTime + '——' + item.endTime}}</p>
          <p class="text2 mt15">{{item.companyName}}</p>
          <p class="text3 mt15">{{item.workContent}}</p>
      </div>
    </div>
    <!-- 工作期望 -->
    <div class="item" v-if="info.jobExpectMap">
      <div class="top flex flex-between flex-middle">
        <div class="text1">工作期望</div>
        <div @click="routerTo('../expect/main',info.jobExpectMap)">
          <van-icon name="edit" color="#3BB8FD" />
          <span class="text1">编辑</span>
        </div>
      </div>
      <div class="bottom">
        <p v-if="info.jobExpectMap.jobTypeLimit != 0">
          <span class="text3">期望工作类型：</span>
          <span class="text2">{{info.jobExpectMap.jobTypeName}}</span>
        </p>
        <p>
          <span class="text3">期望工作时间：</span>
          <span class="text2">{{info.jobExpectMap.workTimeTypeName}}</span>
        </p>
        <p v-if="info.jobExpectMap.shortWorkTimeTypeLimit !=0 ">
          <span class="text3">接受上班时间：</span>
          <span class="text2">{{info.jobExpectMap.shortWorkTimeTypeName}}</span>
        </p>
        <p>
          <span class="text3">可否全职上班：</span>
          <span class="text2" v-if="info.jobExpectMap.isFullTimeWork==1">可以</span>
          <span class="text2" v-else-if="info.jobExpectMap.isFullTimeWork==0">不可以</span>
        </p>
      </div>
    </div>
    <!-- 技能证书 -->
    <div class="item">
      <div class="top flex flex-between flex-middle">
        <div class="text1">技能证书</div>
        <div @click="routerTo('../skillBook/main')">
          <van-icon name="plus" color="#3BB8FD" />
          <span class="text1">添加</span>
        </div>
      </div>
      <div class="bottom">
        <div @click="routerTo('../skillBook/main',item)" class="flex" v-for="(item,index3) in info.skillList" :key="index3">
          <img :src="item.skillImgUrl" alt />
          <div class="bottom-content">
            <p class="name">{{item.skillName}}</p>
            <p class="text3 mt15">{{item.skillDesc}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="add" v-if="!info.selfEvaluation"  @click="routerTo('../evaluate/main')">
      <van-icon name="plus" color="#3BB8FD" size="14px" />添加自我评价
    </div>
    <div class="item" v-else>
      <div class="top flex flex-between flex-middle">
        <div class="text1">自我评价</div>
        <div @click="routerTo('../evaluate/main',info.selfEvaluation)">
          <van-icon name="edit" color="#3BB8FD" />
          <span class="text1">编辑</span>
        </div>
      </div>
      <div class="bottom">{{info.selfEvaluation}}</div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      resumeCompleteness: "",
      info: "",
      eduType: {}
    };
  },
  onShow() {
    this.resumeCompleteness = this.globalData.resumeCompleteness;
    this.getResumeList();
    // this.updateMemberInfo();
  },
  methods: {
    routerTo(url,id) {
      if(id){
        if(typeof id === "object"){
          wx.navigateTo({ 'url':url+'?item='+JSON.stringify(id) });
        }else if (typeof id === "string") {
          wx.navigateTo({ 'url':url+'?item='+id });
        }
      }else {
        wx.navigateTo({ url });
      }
    },
    //获取个人简历
    getResumeList() {
      this.$api.getResumeList().then(res => {
        const disc = wx.getStorageSync("dictList");
        res.data.memberEducationList.forEach(item => {
            item.educationText = disc.educations.find(i => {
              return i.value == item.education;
            }).name;
        });
        if (res.data.jobExpectMap.shortWorkTimeType) {
          const shortWorkTimeType = res.data.jobExpectMap.shortWorkTimeType.split(',');
          res.data.jobExpectMap.shortWorkTimeTypeName = shortWorkTimeType.map(item => {
              return disc.workTimeTypes.find(i => {
                  return item == i.value;
              }).name;
          }).join(',');
        }
        if (res.data.jobExpectMap.jobType) {
            const jobType = res.data.jobExpectMap.jobType.split(',');
            res.data.jobExpectMap.jobTypeName = jobType.map(item => {
                return disc.jobTypes.find(i => {
                    return item == i.value;
                }).name;
            }).join(',');
        }
        if (res.data.jobExpectMap.workTimeType) {
            res.data.jobExpectMap.workTimeTypeName = disc.shortWorkTimeTypes.find(i => {
              return i.value == res.data.jobExpectMap.workTimeType;
            }).name;
        }
        this.info = res.data;
      });
    },
    //编辑个人简历
    updateMemberInfo() {
      this.$api.updateMemberInfo().then(res => {});
    },
    typeToObj() {
      const disc = wx.getStorageSync("dictList");
    }
  }
};
</script>
<style lang="scss" scoped>
.my-resume {
  .userinfo {
    margin: 15px;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .tag-year {
      height: 16px;
      line-height: 16px;
      background: rgba(59, 184, 253, 0.16);
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
      padding: 2px 8px;
      margin-right: 5px;
    }
    .tag-edu {
      height: 16px;
      line-height: 16px;
      background: rgba(253, 205, 59, 0.16);
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(253, 205, 59, 1);
      padding: 2px 8px;
      margin-right: 5px;
    }
    .tag-city {
      height: 16px;
      line-height: 16px;
      background: rgba(253, 114, 59, 0.16);
      border-radius: 2px;
      font-size: 10px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(253, 114, 59, 1);
      padding: 2px 8px;
    }
  }
  .top- {
    margin: 20px;
    .left {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(247, 247, 247, 1);
    }
    .right {
      width: 42px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 9px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
  .item {
    margin: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .top {
      padding-bottom: 15px;
      border-bottom: 1px solid #f7f7f7;
    }
    .bottom {
      padding-top: 15px;
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
    }
    .bottom-content {
      flex: 1;
    }
  }
  .add {
    width: 345px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(59, 184, 253, 1);
    margin: 15px;
  }
  .name {
    font-size: 15px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(46, 46, 46, 1);
  }
  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 100%;
  }
  .text1 {
    font-size: 15px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(59, 184, 253, 1);
  }
  .text2 {
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(46, 46, 46, 1);
    line-height: 21px;
  }
  .text3 {
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(193, 196, 201, 1);
    line-height: 24px;
  }
  .bg {
    width: 375px;
    height: 110px;
    background: rgba(59, 184, 253, 1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
</style>